<template>
  <div style="border: 2px dotted lightblue;width: 800px; height: 500px;margin: 0 auto;">
    <div style="margin-top: 250px;">
      <el-upload class="upload-demo" ref="upload" action="http://localhost:3000/uploadimg" :headers='header'
        :on-preview="handlePreview" 
        :file-list="fileList" 
        :auto-upload="false"
        list-type="picture" multiple 
        :on-success="
          (response, file, fileList) => {
            return handleSuccess(response, file, fileList);
          }">
        <div slot="file" slot-scope="{file}" v-for="(item,index) in fileList " :key="index">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" @click="show(file)">
          <span>name:{{ file.name }}</span>
          <span style="margin-left: 15px;">size:{{ file.size }}</span>
          <span v-if="!disabled" @click="handleRemove(index)"  style="margin-left: 15px;">×</span>
        </div>
        <el-button slot="trigger" size="small" type="primary">选择照片</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
      </el-upload>
      <el-dialog :title="提示" :visible.sync="dialogVisible" :before-close="handleClose" width='30%'>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      disabled: false,
      dialogImageUrl: '',
      header: { 'authorization': localStorage["token"] },
      total:60,
      filenum:0
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(index) {
      console.log("删除对象", index);
      if (isNaN(index) || index >= this.fileList.length) {
        return false;
      }
      this.fileList.splice(index, 1);
      console.log("删除后==", this.fileList);
      this.filenum--;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    show(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
  },

}
</script>
